<template>
    <div class="person">
        <h2>Current sum: {{ sum }}</h2>
        <button @click="add">click sum add 1</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

    let sum = ref(0)

    function add() {
        sum.value += 1
    }

    // create
    console.log('create')
    // mount
    onBeforeMount(() => {
        console.log('before mounted');
    })
    onMounted(() => {
        console.log('son -- after mounted');
    })
    onBeforeUpdate(() => {
        console.log('before upfated');
    })
    onUpdated(() => {
        console.log('after updated');
    })
    onBeforeUnmount(() => {
        console.log('before unmounted');
    })
    onUnmounted(() => {
        console.log('after unmounted');
    })
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
    li {
        font-size: 20px;
    }
</style>